<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姓名案例插值语法实现</title>
    <!-- 引入生产版本的vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 当data中的属性发生变化时,模板会重新解析 其中{{}}中的方法一定会被重新解析 -->
    <div id="app">
        <h3>姓</h3>
        <input type="text" v-model="firstName"><br/>
        <h3>名</h3>
        <input type="text" v-model="lastName"><br/>
        {{firstName+'-'+lastName}}<br/>
        {{fullName()}}
    </div>


    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    firstName: "",
                    lastName:"",
                };
            },
            methods:{
                fullName(){
                    return this.firstName + '-' + this.lastName;
                }
            }
        })
    </script>
</body>
</html>